<template>
  <div class="life">
    <!-- 协力生活 -->
    <div class="duty">
      <div v-for="(item, index) in list" :key="index">
        <div v-if="index % 2 != 0" class="duty_item">
          <div class="img">
            <img class="imgX" :src="item.image" alt />
          </div>
          <div class="content">
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
          </div>
        </div>
        <div v-else class="duty_item ">
          <div class="content2">
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
          </div>
          <div class="img img2">
            <img class="imgX" :src="item.image" alt />
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      class="page"
      :page-size="10"
      :total="count"
      background
      layout="prev, pager, next"
      @current-change="pageSize"
    ></el-pagination>
  </div>
</template>
<script>
import { respons_list } from "@/api/recruitment.js";
export default {
  data() {
    return {
      list: [],
      count: 0
    };
  },
  mounted() {
    this.getList(1);
  },
  methods: {
    pageSize(e) {
      this.getList(e);
    },
    getList(page) {
      respons_list({ page, size: 10 }).then(res => {
        console.log(res);
        this.list = res.data.data;
        this.count = res.data.count;
      });
    }
  }
};
</script>
<style scoped src="./sass/recruitment.css"></style>
